<template>
  <view class="report">
    <!-- user -->
    <view class="head">
      <view class="right">
        <view class="name">{{ groupName }}</view>
        <view v-if="rank != -1" class="p"
        >您的团队在本次活动排
          <text class="red">第{{ rank }}名</text>
        </view
        >
        <view v-else class="p">
          <text class="red">暂无排名</text>
        </view>
      </view>
      <view class="status">
        <image
            class="icon"
            src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/yxbg-tg-icon.png"
        >
        </image>
        <view v-if="rank != -1">总排第{{ rank }}名</view>
        <view v-else>暂无排名</view>
      </view>
    </view>
    <!--  -->
    <view class="wrap">
      <view class="map-wrap">
        <view class="title">
          <view class="h1">{{ form.proposalName }}</view>
          <view class="h2">
            您的团队里程
            <text
            >{{ Number(form.teamMileage / 1000).toFixed(2) }}km
            </text
            >
            已超过
            <text>{{ form.exceedancePercentage }}%</text>
            团队
          </view>
        </view>
        <view class="map">
          <map
              :latitude="latitude"
              :longitude="longitude"
              :markers="markers"
              :polyline="polyline"
              style="width: 100%; height: 100%"
          >
          </map>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="content">
      <view class="cont">
        <view class="title flex">
          团队任务
          <!-- <view class="defen">
            <image src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/defen.png" mode=""></image>
            <text>50</text>
          </view> -->
        </view>
        <view v-for="(item, index) in taskList" :key="index" class="list">
          <view class="h1">
            <image
                src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/icon-tips.png"
            ></image>
            <text>{{ item.scenicName }}</text>
            <!-- <view class="flex">
              50分
            </view> -->
          </view>
          <view v-for="(a, b) in item.taskVos" :key="b" class="h2 flex">
            <text>{{ a.taskName ? a.taskName : "****" }}</text>
            <image
                v-if="item.score != -1"
                :class="a.correct ? '' : 'width_43'"
                :src="`https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/${
                a.correct ? 'fial-red' : 'gou-icon'
              }.png`"
                class="image"
                mode=""
            ></image>
          </view>
        </view>
      </view>
      <!--  -->
      <view class="cont">
        <view class="title flex"> 团队成员</view>
        <view class="member">
          <view v-for="item in memberList" :key="item" class="item">
            <view class="user">
              <image :src="item.headImg" class="avatar"></image>
              <view class="name">{{ item.memberName }}</view>
            </view>
            <view :class="{ red: item.clearanceStatus === 0 }" class="status">
              {{ item.clearanceStatus ? "已通关" : "未通关" }}
            </view>
            <image
                class="ckbg"
                src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/ckbg.png"
                @click="toPath('/pages/me/reportList', item)"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  queryTeamItineraryReportGroupInfo,
  queryTeamItineraryReportTaskSituation,
  queryGroupMemberList,
  queryItineraryReportProposalInfo,
} from "@/api/login.js";

export default {
  data() {
    return {
      proposalId: "",
      groupId: "",
      groupName: "",
      rank: "",
      taskList: [],
      memberList: [],
      form: {
        proposalName: "",
        teamMileage: "",
        exceedancePercentage: "",
      },
      longitude: "",
      latitude: "",
      markers: [],
      polyline: [
        {
          points: [],
          color: "#1661B8",
          arrowLine: true,
          width: 5,
        },
      ],
      participant: false,
    };
  },
  onLoad() {
    let groupReportInfo = uni.getStorageSync("groupReportInfo");
    let {groupId, proposalId} = groupReportInfo;
    this.groupId = groupId;
    let journeyInfo = uni.getStorageSync("journeyInfo");
    let {roles} = journeyInfo;
    this.proposalId = proposalId;
    console.log(roles);
    for (let i in roles) {
      this[i] = roles[i];
    }
    this.init();
  },
  methods: {
    init() {
      queryTeamItineraryReportGroupInfo({
        groupId: this.groupId,
      }).then((res) => {
        for (let i in res) {
          this[i] = res[i];
        }
      });
      queryTeamItineraryReportTaskSituation({
        groupId: this.groupId,
      }).then((res) => {
        this.taskList = res;
      });

      queryItineraryReportProposalInfo({
        groupId: this.groupId,
        proposalId: this.proposalId,
      }).then((res) => {
        console.log(res);
        let {scenicVos} = res;
        if (scenicVos && scenicVos.length) {
          this.latitude = scenicVos[0].y;
          this.longitude = scenicVos[0].x;
        }
        this.markers = scenicVos.map((el, index) => {
          return {
            width: 24,
            height: 45,
            id: el.id,
            label: {
              content: el.scenicName,
            },
            content: "content",
            latitude: el.y,
            longitude: el.x,
            iconPath: `https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/location${
                index + 1
            }.png`,
          };
        });
        this.polyline[0].points = scenicVos.map((el) => {
          return {
            latitude: Number(el.y),
            longitude: Number(el.x),
          };
        });

        this.form = res;
      });
      queryGroupMemberList({
        groupId: this.groupId,
      }).then((res) => {
        this.memberList = res;
      });
    },
    toPath(url, item) {
      if (item) {
        if (!item.phone) {
          this.toast("暂无手机号字段");
          return;
        }
        url = `${url}?phone=${item.phone}`;
      }
      console.log(this.participant);
      if (
          this.participant &&
          item.phone !== uni.getStorageSync("userinfo").phone
      ) {
        this.toast("权限不足，不能查看");
        return;
      }
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.report {
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 242rpx;
    background: linear-gradient(
            180deg,
            rgba(142, 197, 252, 1) 0%,
            rgba(224, 195, 252, 0.2) 60% 80%,
            rgba(255, 255, 255, 1) 100%
    );
    padding: 20rpx 50rpx;
    box-sizing: border-box;
    margin-bottom: 10rpx;

    .right {
      .name {
        font-size: 40rpx;
        font-weight: 500;
        line-height: 58rpx;
        color: rgba(0, 0, 0, 1);
        margin-bottom: 20rpx;
      }

      .p {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 36rpx;
        color: rgba(56, 56, 56, 1);

        .red {
          font-size: 30rpx;
          font-weight: 700;
          color: rgba(255, 87, 51, 1);
        }
      }
    }

    .user-wrap {
      display: flex;
      align-items: center;
    }

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border: 8rpx solid rgba(42, 130, 228, 1);
      border-radius: 50vh;
      flex-shrink: 0;
      margin-right: 35rpx;
    }

    .user {
      font-size: 40rpx;
      font-weight: 700;
      line-height: 58rpx;
      color: rgba(50, 57, 67, 1);
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;

      .icon {
        width: 110rpx;
        height: 32rpx;
        margin-left: 10rpx;
      }
    }

    .mileage {
      font-size: 20rpx;
      font-weight: 500;
      line-height: 36rpx;
      color: rgba(56, 56, 56, 1);

      text {
        font-size: 48rpx;
        font-weight: 700;
        line-height: 70rpx;
        color: rgba(7, 171, 160, 1);
      }
    }

    .text {
      font-size: 24rpx;
      line-height: 34.75rpx;
      color: rgba(0, 0, 0, 1);
    }

    .status {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 28rpx;
      font-weight: 700;
      line-height: 40.54rpx;
      color: rgba(128, 128, 128, 1);
      text-align: center;

      .icon {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }

  .wrap {
    width: 100%;
    padding: 28rpx;
    box-sizing: border-box;
  }

  .map-wrap {
    width: 100%;
    margin-bottom: 20rpx;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24);

    .title {
      width: 100%;
      height: 110rpx;
      border-radius: 10rpx 10rpx 0px 0px;
      background: linear-gradient(
              180deg,
              rgba(68, 129, 235, 1) 0%,
              rgba(4, 190, 254, 1) 100%
      );
      border-bottom: 4px solid rgba(12, 122, 247, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .h1 {
        font-size: 30rpx;
        font-weight: 700;
        line-height: 44rpx;
        color: rgba(255, 255, 255, 1);
      }

      .h2 {
        font-size: 20rpx;
        font-weight: 500;
        line-height: 29rpx;
        color: rgba(255, 255, 255, 1);

        text {
          font-size: 30rpx;
          font-weight: 900;
          line-height: 36rpx;
          color: rgba(255, 235, 59, 1);
        }
      }
    }

    .map {
      width: 100%;
      height: 610rpx;
      border-radius: 0px 0px 10rpx 10rpx;
    }
  }
}

.content {
  padding: 28rpx;

  .cont {
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0pt 3rpx 12rpx -3rpx rgba(0, 0, 0, 0.24);
    margin-bottom: 30rpx;
    position: relative;

    .bgs {
      position: absolute;
      width: 140rpx;
      height: 159.11rpx;
      opacity: 0.5;
      bottom: 0;
      right: 0;
    }

    .title {
      height: 90rpx;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      opacity: 1;
      border-radius: 10rpx 10rpx, 0pt, 0pt;
      background: rgba(43, 122, 251, 1);
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 0pt;
      color: rgba(255, 255, 255, 1);
      position: relative;

      .defen {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        font-size: 55rpx;
        font-weight: 900;
        letter-spacing: 0pt;
        line-height: 79.64rpx;
        color: rgba(212, 48, 48, 1);
        text-align: center;

        text {
          position: absolute;
          width: 100%;
          padding-top: 60rpx;
          top: 0;
          left: 0;
        }

        image {
          width: 130rpx;
          height: 155rpx;
        }
      }
    }

    .list {
      padding: 20rpx 0;
      margin: 0 20rpx;
      border-bottom: 2rpx solid rgba(166, 166, 166, 1);

      .h1 {
        display: flex;
        height: 55rpx;
        align-items: center;

        image {
          width: 45rpx;
          height: 45rpx;
        }

        text {
          font-size: 36rpx;
          font-weight: 400;
          letter-spacing: 0pt;
          color: rgba(0, 0, 0, 1);
          flex: 1;
          margin-left: 15rpx;
        }

        view {
          width: 130rpx;
          height: 55rpx;
          opacity: 1;
          border-radius: 20rpx;
          border: 2rpx solid rgba(201, 148, 2, 1);
          font-size: 30rpx;
          font-weight: 500;
          letter-spacing: 0pt;
          color: rgba(201, 148, 2, 1);
        }
      }

      .h2 {
        font-size: 32rpx;
        font-weight: 400;
        letter-spacing: 0pt;
        line-height: 46.34rpx;
        color: rgba(56, 56, 56, 1);
        margin-top: 10rpx;
        position: relative;
        padding-right: 0rpx;
        align-items: flex-start;

        text {
          flex: 1;
        }

        image {
          margin-top: 6rpx;
          margin-left: 10rpx;
          flex-shrink: 0;
          width: 35rpx;
          height: 35rpx;
          padding: 0 4rpx;
        }

        .width_43 {
          width: 43rpx;
          height: 32rpx;
          padding: 1.5rpx 0;
        }
      }
    }

    .list:last-of-type {
      border-bottom: none;
    }
  }

  .member {
    padding: 0 20rpx;
    box-sizing: border-box;
    width: 100%;

    .item {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      height: 120rpx;
      border-radius: 10rpx;
      background: rgba(252, 241, 204, 1);
      margin: 20rpx 0;
      padding: 0 30rpx;
      box-sizing: border-box;
    }

    .user {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .avatar {
      flex-shrink: 0;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50vh;
      border: 4rpx solid rgba(255, 195, 0, 1);
    }

    .name {
      margin-left: 30rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 43rpx;
      color: rgba(235, 93, 5, 1);
      min-width: 6em;
    }

    .status {
      flex-shrink: 0;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 43.44rpx;
      color: rgba(0, 186, 173, 1);

      &.red {
        color: rgba(255, 87, 51, 1);
      }
    }

    .ckbg {
      width: 125rpx;
      height: 46rpx;
    }
  }
}
</style>
